<template>
    <el-menu
      class="navbar"
      mode="horizontal"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#3F5D62"
      :router="true"
    >
      <div class="nav-left">
        <img src="@/assets/info/logo.png" alt="SHARED-AI" class="logo">
        <span>SHARED-AI</span>
      </div>
  
      <div class="nav-center">
        <el-menu-item index="/">
          <i class="el-icon-s-home"></i>
          首页
        </el-menu-item>
        <el-menu-item index="/my-service" v-if="isAuthenticated">
          <i class="el-icon-s-ticket"></i>
          我的服务
        </el-menu-item>
        <el-menu-item index="/promotion" v-if="isAuthenticated">
          <i class="el-icon-share"></i>
          推广
        </el-menu-item>
        <el-menu-item index="/alliance">
          <i class="el-icon-connection"></i>
          联盟合作
        </el-menu-item>
        <el-menu-item index="/supply">
          <i class="el-icon-coordinate"></i>
          供给合作
        </el-menu-item>
      </div>
  
      <div class="nav-right">
        <!-- 未登录状态显示登录按钮 -->
        <el-button v-if="!isAuthenticated" type="primary" size="small" @click="goToLogin" class="login-btn">
          <i class="el-icon-user"></i> 登录/注册
        </el-button>
        
        <!-- 已登录状态显示用户信息和下拉菜单 -->
        <el-dropdown v-else trigger="click">
          <span class="el-dropdown-link">
            <i class="el-icon-user-solid"></i>
            {{ userInfo.username || '用户' }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleGoToProfile">
              <i class="el-icon-user"></i> 个人中心
            </el-dropdown-item>
            <el-dropdown-item @click.native="handleLogout">
              <i class="el-icon-switch-button"></i> 退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
  </template>
  
  <script>
  import { mapGetters, mapActions } from 'vuex'
  
  export default {
    name: 'NavBar',
    computed: {
      ...mapGetters(['isAuthenticated', 'userInfo'])
    },
    methods: {
      ...mapActions(['logout']),
      goToLogin() {
        if (this.$route.path !== '/login') {
          this.$router.push('/login')
        }
      },
      async handleGoToProfile() {
        try {
          console.log('尝试跳转到个人中心')
          await this.$router.push('/personal-center')
          console.log('跳转成功')
        } catch (error) {
          console.error('路由跳转失败:', error)
        }
      },
      async handleLogout() {
        try {
          await this.logout()
          this.$message.success('退出登录成功')
          // 如果当前页面需要登录权限，则跳转到首页
          const publicPages = ['/', '/login', '/alliance', '/supply', '/privacy-policy', '/user-agreement', '/studio', '/recruit']
          if (!publicPages.includes(this.$route.path)) {
            this.$router.push('/')
          }
        } catch (error) {
          this.$message.error('退出登录失败')
          console.error('退出登录失败:', error)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  /* 导航栏基础样式 */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    border-bottom: none !important;
    padding: 0;
    height: 60px;
    background-color: #ffffff !important; /* 改为白色背景 */
  }
  
  /* 左侧logo区域样式 */
  .nav-left {
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-width: 200px;
  }
  
  .logo {
    height: 40px;
    margin-right: 20px;
    margin-left: 60px; /* 调整logo向右偏移 */
  }
  
  /* 中间导航区域样式 */
  .nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* 右侧用户区域样式 */
  .nav-right {
    min-width: 200px;
    display: flex;
    justify-content: flex-end;
    padding-right: 80px; /* 调整用户信息向左偏移 */
  }
  
  /* 登录按钮样式 */
  .login-btn {
    background-color: #3F5D62 !important;
    border-color: #3F5D62 !important;
    color: #ffffff;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .login-btn:hover {
    background-color: #4a6d73 !important;
    border-color: #4a6d73 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(63, 93, 98, 0.3);
  }
  
  .login-btn i {
    margin-right: 4px;
  }
  
  /* 用户下拉菜单链接样式 */
  .el-dropdown-link {
    color: #333333;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .el-dropdown-link:hover {
    background-color: rgba(63, 93, 98, 0.1);
  }
  
  .el-dropdown-link i {
    margin-right: 5px;
    color: #3F5D62;
  }
  
  /* Element UI 菜单样式覆盖 */
  .el-menu {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f0f0f0 !important; /* 添加浅色边框 */
  }
  
  .el-menu--horizontal {
    border-bottom: none !important;
  }
  
  .el-menu--horizontal > .el-menu-item {
    height: 60px;
    line-height: 60px;
    font-size: 15px;
    padding: 0 15px;
    margin: 0 5px;
    color: #333333; /* 文字颜色改为深灰 */
  }
  
  .el-menu--horizontal > .el-menu-item i {
    margin-right: 5px;
    font-size: 18px;
    color: #666666; /* 图标颜色 */
  }
  
  .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover {
    background-color: rgba(63, 93, 98, 0.1) !important;
    border-radius: 4px;
    color: #3F5D62 !important;
  }
  
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 2px solid #3F5D62 !important;
    font-weight: bold;
    color: #3F5D62 !important;
  }
  
  .el-menu--horizontal > .el-menu-item.is-active i {
    color: #3F5D62 !important;
  }
  
  /* 下拉菜单样式 */
  .el-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 4px;
    padding: 5px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  .el-dropdown-menu__item {
    color: #333333 !important;
    padding: 8px 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  
  .el-dropdown-menu__item i {
    margin-right: 8px;
    font-size: 16px;
    color: #666666;
  }
  
  .el-dropdown-menu__item:hover {
    background-color: rgba(63, 93, 98, 0.1) !important;
    color: #3F5D62 !important;
  }
  
  .el-dropdown-menu__item:hover i {
    color: #3F5D62 !important;
  }
  
  /* 过渡动画效果 */
  .el-menu-item, .el-dropdown-menu__item {
    transition: all 0.3s ease;
  }
  
  /* 导航栏阴影效果 */
  .navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 减小阴影深度 */
  }
  </style>